<template>
    <el-form ref="formRef" :model="searchFormData" v-bind="formConfigComputed">

        <el-row :gutter="20">
            <el-col v-for="formItem in formJSON" :key="formItem.key" v-bind="formItem.colProps">
                <el-form-item :label="formItem.label && `${formItem.label}:`" :prop="formItem.key" :rules="formItem.rules"
                    v-bind="formItem.formProps">
                    <div v-if="formItem.type === 'buttonBox'" v-bind="formItem.props">
                        <el-button v-if="formItem.openExportBtn" v-on="formItem?.on?.exportBtn">导出</el-button>
                        <el-button type="primary" v-if="formConfigComputed.showSearchButton"
                            v-bind="formItem?.props?.confirmBtn" v-on="formItem?.on?.confirmBtn">查询</el-button>
                        <el-button v-if="formConfigComputed.showRestButton" v-bind="formItem?.props?.resetBtn"
                            v-on="formItem?.on?.resetBtn">重置</el-button>
                    </div>

                    <component v-else :is="`el-${formItem.type}`" v-bind="formItem.props" v-on="formItem?.on || {}"
                        v-model="searchFormData[formItem.key]" @change="
                            formItem.formChange
                                ? formItem.formChange(formItem.key, searchFormData, $event)
                                : null
                            ">
                        <template :key="key" v-for="(render, key) of formItem.slots" #[key]>
                            <ExtentSlot :key="key" :render="render"></ExtentSlot>
                        </template>
                    </component>
                </el-form-item>
            </el-col>

        </el-row>




    </el-form>
</template>
  
<script>
import ExtentSlot from "./ExtentSlot.js";

export default {
    components: { ExtentSlot },
    name: "formComponent",
    props: {
        formConfig: {
            ///表单的props也可直接写对应props
            type: Object,
            default: (h, data) => {
                return
            },
        },
        labelCol: {
            type: Number || String,
            default: 0,
        },
        labelAlign: {
            type: String,
            default: "right",
        },
        searchFormData: {
            type: Object,
            default: () => {
                return {};
            },
        },
        formJSON: {
            type: Array,
            default: () => {
                return [
                    {
                        key: "name",
                        label: "输入框",
                        type: "input",
                        props: {
                            allowClear: true,
                            placeholder: "请输入",
                        },
                        colProps: {
                            sm: 24,
                            md: 24,
                            lg: 12,
                            xl: 6,
                            xxl: 6,
                        },
                    },
                ];
            },
        },
    },
    created() { },
    data() {
        return {};
    },
    computed: {
        // 计算显示表单配置
        formConfigComputed() {
            return Object.assign(
                {
                    // 默认是配置
                    showSearchButton: true,
                    showRestButton: true,
                },
                this.formConfig
            );
        },
    },

    methods: {
        async validateFields() {
            await this.$refs.formRef.validate();
        },
        resetForm() {
            for (let key in this.searchFormData) {
                this.searchFormData[key] = null;
            }
            // this.$refs.formNode.resetFields()
        },
    },
};
</script>
<style scoped>
.ant-card-body {
    padding: 20px 20px 0;
}
</style>
  